<template>
<div>
    <h4 v-on:click="changeFn(newData)">provide-inject--孙子组件</h4>
    <div class="inject-box">
        {{injectdata}}
    </div>
</div>
</template>

<script setup lang='ts'>
import { inject, reactive } from "@vue/runtime-core";

    let injectdata = inject('rootData');
    let changeFn = inject('rootchnageFn');

    let newData = reactive({
        name: 'inject-root',
            age: 40,
            colosrs: {
                likes: 'red'
            }
    })

</script>
    
<style lang="less">
    h4 {
        font-size: .16rem;
    }
    .inject-box {
        font-size: .16rem;
        width: 3rem;
        height: 2rem;
        border: .0033rem solid rgb(53, 213, 90);
    }
</style>